<template>
  <van-nav-bar title="种草推荐" left-text="返回" left-arrow  @click-left="router.back()">
 <template #right>
      <van-icon name="add-o" />
  </template>
</van-nav-bar>
<div class="list">
    <van-list
     :offset="10"
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
 <div
  class="comments-item"
        v-for="(item, index) in commentsList"
        :key="index"
 
 >

 </div>
</van-list>
</div>
</template>
<script setup>
import { useRoute,useRouter } from 'vue-router'
import {getComments} from '@/api/comment'
import {onMounted,ref,reactive} from 'vue'
 let route = useRoute()
let router=useRouter()
let commentList = ref([])
let apiData=reactive({limit:10,page:1});
// 判断 当前 是否在加载状态
// loading 会在调用onLoad时 vant组件 帮我们改为true
let loading = ref(false);
// 是否加载完全部数据
let finished = ref(false);
// 最大页面  第一次 请求时 就赋值了
let maxPage = ref(1);
let onload = async()=>{
  if(apiData.page<=maxPage.value){
    let res = await getComments(apiData);
    loading.value=false
    maxPage.value=Math.ceil(res.data.count/apiData.limit);
    apiData.page++;
    if(res.data.list){
      commentList.value.push(...res.data.list)
    }
  }else{
    loading.value = false;
    finished.value = true;
  }
}
</script>

<style scoped lang="scss">
.list {
  margin-bottom: 50px;
  .comments-item {
    height: 100px;
    background-color: bisque;
    margin-bottom: 6px;
  }
}
</style>
